import React, { useState } from 'react';
import Footer from '../../components/footer/footer';
import Time from '../../components/time/time';
import Keep from '../../components/keep/keep';
import 搜索 from "../../assets/homeimg/搜索 (1).png"
import 腹肌 from '../../assets/homeimg/腹肌.webp'
import 三角 from '../../assets/homeimg/向右三角形 (1).png'
import 健身 from '../../assets/homeimg/健身1.webp'
import 健身2 from '../../assets/homeimg/健身2.jpg'
import 运动1 from '../../assets/homeimg/运动1.jpg'
import 运动2 from '../../assets/homeimg/运动2.jpg'
import 运动3 from '../../assets/homeimg/运动2.webp'
import 瑜伽1 from '../../assets/homeimg/瑜伽1.webp'
import 瑜伽2 from '../../assets/homeimg/瑜伽2.webp'
import 瑜伽3 from '../../assets/homeimg/瑜伽3.webp'
import 瑜伽4 from '../../assets/homeimg/瑜伽4.jpg'
import { Tabs } from 'antd';
import Map from '../../components/map/map'
import { Link } from 'react-router-dom';

const { TabPane } = Tabs;

const items = [
  {
    key: '1',
    label: 'Planning',
    children: <>
      <div style={{height:'900px'}}>
      <div style={{position:'relative'}}>
        <img style={{ width:'94%', height:'100%', borderRadius:"10%" }} src={腹肌} alt="" />
        <div style={{ position:'absolute', left:"10%", top:'60%', fontSize:'20px', fontWeight:600, color:'white' }}>Today's Training Course</div>
        <div style={{ position:'absolute', left:"10%", top:'75%', fontSize:'16px', fontWeight:500, color:'#cac9c4' }}>Core training course</div>
        <div style={{ position:'absolute', left:"70%", top:'90%', width:'40px', height:'40px', borderRadius:"40px", backgroundColor:'#ec8062' }}></div>
        <img style={{ width:'20px', height:'20px', position:'absolute', left:"73%", top:'93.5%' }} src={三角} alt="" />
    </div>
    <div style={{marginTop:'20px',fontWeight:600}}>Training schedule</div>
    {/* 日历 */}
    <Time/>
    <Keep image={健身} text="Core training course"/>
    <Keep image={健身2} text="Upper body strength classes"/>
      </div>
    </>
      
    ,
  },
  {
    key: '2',
    label: 'Running',
    children: 
    <>
    <Map text="RUN"/>
    <div style={{ position:'absolute',bottom:"-10px", left:"8px",zIndex:"998", width:"90%",height:"200px",backgroundColor:'#796de7',borderRadius:'20px'}}>
    <h2 style={{color: "white", padding: "0px",marginLeft:'10px'}}>天气预报</h2>
    <p style={{color: "white", padding: "0px",marginLeft:'10px'}}>今天：晴，温度 25°C</p>
    <p style={{color: "white", padding: "0px",marginLeft:'10px'}}>明天：多云，温度 22°C</p>
    <p style={{color: "white", padding: "0px",marginLeft:'10px'}}>后天：阴，温度 20°C</p>
    </div>
    </>
    ,
  },
  {
    key: '3',
    label: 'Cycling',
    children: 
    <>
    <Map text="RIDE"/>
    <div style={{ position:'absolute',bottom:"-10px", left:"8px",zIndex:"998", width:"90%",height:"200px",backgroundColor:'#796de7',borderRadius:'20px'}}>
    <h2 style={{color: "white", padding: "0px",marginLeft:'10px'}}>天气预报</h2>
    <p style={{color: "white", padding: "0px",marginLeft:'10px'}}>今天：晴，温度 25°C</p>
    <p style={{color: "white", padding: "0px",marginLeft:'10px'}}>明天：多云，温度 22°C</p>
    <p style={{color: "white", padding: "0px",marginLeft:'10px'}}>后天：阴，温度 20°C</p>
    </div>
    </>
    ,
  },
  {
    key: '4',
    label: 'Gym',
    children: 
    <>
      <div style={{height:'1100px'}}>
      <div style={{position:'relative'}}>
        <img style={{ width:'94%', height:'100%', borderRadius:"10%" }} src={运动1} alt="" />
        <div style={{ position:'absolute', left:"10%", top:'60%', fontSize:'20px', fontWeight:600, color:'white' }}>Today's Training Course</div>
        <div style={{ position:'absolute', left:"10%", top:'75%', fontSize:'16px', fontWeight:500, color:'#cac9c4' }}>Core training course</div>
    </div>
    <div style={{marginTop:'20px',fontWeight:600}}>My course</div>
    <Keep image={运动2} text="Core training course"/>
    <Keep image={健身2} text="Upper body strength classes"/>
    <Keep image={健身} text="Core training course"/>
    <Keep image={运动3} text="Upper body strength classes"/>
      </div>
    </>
    ,
  },
  {
    key: '5',
    label: 'Yoga',
    children:
    <>
      <div style={{height:'1100px'}}>
      <div style={{position:'relative'}}>
        <img style={{ width:'94%', height:'100%', borderRadius:"10%" }} src={瑜伽1} alt="" />
        <div style={{ position:'absolute', left:"10%", top:'60%', fontSize:'20px', fontWeight:600, color:'white' }}>Today's Training Course</div>
        <div style={{ position:'absolute', left:"10%", top:'75%', fontSize:'16px', fontWeight:500, color:'#cac9c4' }}>Core training course</div>
    </div>
    <div style={{marginTop:'20px',fontWeight:600}}>My course</div>
    <Keep image={瑜伽2} text="Core training course"/>
    <Keep image={瑜伽3} text="Upper body strength classes"/>
    <Keep image={瑜伽4} text="Core training course"/>
    <Keep image={运动3} text="Upper body strength classes"/>
      </div>
    </>
    ,
  },
];

function Home() {
  const [activeKey, setActiveKey] = useState('1');

  const onChange = (key) => {
    setActiveKey(key);
  };

  return (
    <div className="home">
      {/* 头部 */}
      <div style={{ display: 'flex', justifyContent: "space-between", paddingTop: '20px', padding: '10px' }}>
        <div style={{ fontSize: '20px', fontWeight: '600' }}>movement</div>
        <div>
        <Link to="./search">
          <img style={{ width: '30px', height: '30px' }} src={搜索} alt="" />
        </Link>
        </div>
      </div>
      {/* 标签 */}
      <Tabs style={{ marginLeft: '20px' }} defaultActiveKey="1" activeKey={activeKey} onChange={onChange}>
        {items.map(item => (
          <TabPane tab={item.label} key={item.key}>
            {activeKey === item.key && <div>{item.children}</div>}
          </TabPane>
        ))}
      </Tabs>
      <Footer />
    </div>
  );
}

export default Home;
